<template>
  <div class="coupon-card-panel">
    <el-form label-width="80px" size="small">
      <!-- 基础设置 -->
      <el-form-item label="布局">
        <el-radio-group v-model="localData.displayMode">
          <el-radio label="grid">网格布局</el-radio>
          <el-radio label="list">列表布局</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="每行数量" v-if="localData.displayMode === 'grid'">
        <el-slider
          v-model="localData.gridColumns"
          :min="1"
          :max="3"
          show-stops
        ></el-slider>
      </el-form-item>

      <el-form-item label="间距">
        <el-slider
          v-model="localData.itemMargin"
          :min="5"
          :max="20"
        ></el-slider>
      </el-form-item>

      <el-form-item label="圆角">
        <el-slider
          v-model="localData.borderRadius"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <!-- 卡片样式 -->
      <el-divider content-position="left">卡片样式</el-divider>

      <el-form-item label="卡片样式">
        <el-select v-model="localData.cardStyle" placeholder="请选择卡片样式">
          <el-option label="默认" value="default"></el-option>
          <el-option label="红色" value="red"></el-option>
          <el-option label="蓝色" value="blue"></el-option>
          <el-option label="绿色" value="green"></el-option>
          <el-option label="紫色" value="purple"></el-option>
        </el-select>
      </el-form-item>

      <!-- 标签设置 -->
      <el-divider content-position="left">标签设置</el-divider>

      <el-form-item label="显示标签">
        <el-switch v-model="localData.showTag"></el-switch>
      </el-form-item>

      <el-form-item label="标签文本" v-if="localData.showTag">
        <el-input v-model="localData.tagText" placeholder="请输入标签文本"></el-input>
      </el-form-item>

      <!-- 数据设置 -->
      <el-divider content-position="left">数据设置</el-divider>

      <el-form-item label="显示阅读量">
        <el-switch v-model="localData.showReadCount"></el-switch>
      </el-form-item>

      <el-form-item label="显示点赞数">
        <el-switch v-model="localData.showLikeCount"></el-switch>
      </el-form-item>

      <el-form-item label="显示更多">
        <el-switch v-model="localData.showMore"></el-switch>
      </el-form-item>

      <el-form-item label="底部更多">
        <el-switch v-model="localData.showBottomMore"></el-switch>
      </el-form-item>

      <!-- 背景设置 -->
      <el-divider content-position="left">背景设置</el-divider>

      <el-form-item label="背景色">
        <el-color-picker v-model="localData.backgroundColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="顶部间距">
        <el-slider
          v-model="localData.paddingTop"
          :min="0"
          :max="30"
        ></el-slider>
      </el-form-item>

      <el-form-item label="左右间距">
        <el-slider
          v-model="localData.paddingHorizontal"
          :min="0"
          :max="30"
        ></el-slider>
      </el-form-item>

      <!-- 优惠券管理 -->
      <el-divider content-position="left">优惠券管理</el-divider>

      <el-form-item>
        <el-button type="primary" @click="showCouponDialog = true">管理优惠券</el-button>
      </el-form-item>
    </el-form>

    <!-- 优惠券管理对话框 -->
    <el-dialog
      v-model="showCouponDialog"
      title="优惠券管理"
      width="70%"
    >
      <div class="coupon-manager">
        <el-button type="primary" @click="addCoupon">添加优惠券</el-button>

        <el-table :data="localData.couponList" style="width: 100%; margin-top: 10px;">
          <el-table-column label="金额" width="120">
            <template #default="scope">
              ¥{{ scope.row.amount }}
            </template>
          </el-table-column>

          <el-table-column label="标题" prop="title"></el-table-column>

          <el-table-column label="使用条件" prop="condition"></el-table-column>

          <el-table-column label="有效期" prop="time"></el-table-column>

          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.received ? 'success' : 'info'">
                {{ scope.row.received ? '已领取' : '未领取' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editCoupon(scope.$index)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteCoupon(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCouponDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCoupon">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 优惠券编辑对话框 -->
    <el-dialog
      v-model="showCouponEditDialog"
      :title="isEditingCoupon ? '编辑优惠券' : '添加优惠券'"
      width="50%"
    >
      <el-form :model="currentCoupon" label-width="80px">
        <el-form-item label="优惠券金额">
          <el-input-number v-model="currentCoupon.amount" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="优惠券标题">
          <el-input v-model="currentCoupon.title" placeholder="请输入优惠券标题"></el-input>
        </el-form-item>

        <el-form-item label="使用条件">
          <el-input v-model="currentCoupon.condition" placeholder="请输入使用条件"></el-input>
        </el-form-item>

        <el-form-item label="有效期">
          <el-input v-model="currentCoupon.time" placeholder="请输入有效期"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="currentCoupon.received">
            <el-radio :label="false">未领取</el-radio>
            <el-radio :label="true">已领取</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCouponEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCurrentCoupon">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data'])

// 本地数据
const localData = ref({})
const showCouponDialog = ref(false)
const showCouponEditDialog = ref(false)
const isEditingCoupon = ref(false)
const editingIndex = ref(-1)
const currentCoupon = ref({
  amount: 10,
  title: '',
  condition: '',
  time: '',
  received: false
})

// 初始化数据
onMounted(() => {
  localData.value = { ...props.data }
})

// 监听数据变化
watch(() => props.data, (newVal) => {
  localData.value = { ...newVal }
}, { deep: true })

// 监听本地数据变化
watch(localData, (newVal) => {
  emit('update:data', newVal)
}, { deep: true })

// 添加优惠券
function addCoupon() {
  currentCoupon.value = {
    amount: 10,
    title: '',
    condition: '',
    time: '',
    received: false
  }
  isEditingCoupon.value = false
  showCouponEditDialog.value = true
}

// 编辑优惠券
function editCoupon(index) {
  currentCoupon.value = { ...localData.value.couponList[index] }
  editingIndex.value = index
  isEditingCoupon.value = true
  showCouponEditDialog.value = true
}

// 保存当前优惠券
function saveCurrentCoupon() {
  if (!isEditingCoupon.value) {
    // 添加新优惠券
    if (!localData.value.couponList) {
      localData.value.couponList = []
    }
    localData.value.couponList.push({ ...currentCoupon.value })
  } else {
    // 更新现有优惠券
    localData.value.couponList[editingIndex.value] = { ...currentCoupon.value }
  }

  showCouponEditDialog.value = false
}

// 删除优惠券
function deleteCoupon(index) {
  localData.value.couponList.splice(index, 1)
}

// 保存优惠券列表
function saveCoupon() {
  showCouponDialog.value = false
}
</script>

<style lang="scss" scoped>
.coupon-card-panel {
  .coupon-manager {
    // 这里可以添加样式
  }
}
</style>
